<template>
	<view class="swiper">
		<!-- 大图轮播 -->
		<swiper :circular="circular" :current="currentIndex" class="banner-box swiper-box" :duration="300" @change="swiperChange">
			<swiper-item  class="banner-box-item" v-for="(item, index) in imageList" :key="index">
				<view class="imgBox" @tap.stop="onPreviewImages(index)">
					<image lazy-load class="slide-image" mode="aspectFill" :src="item.file_path">
					</image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 大图轮播-end -->
		<!-- 缩略图 -->
		<scroll-view scroll-with-animation class="thumb-banner-box" scroll-x :show-scrollbar="false" :scroll-into-view="currentId">
			<view class="thumb-banner-item" v-for="(item, index) in imageList" :key="index" :id="'thumb'+index" :data-current="index" @tap="onThumbClick" :class="{ 'active': currentIndex == index }">
				<view class="imgBox">
					<image lazy-load class="slide-image" mode="aspectFill" :src="item.file_path"></image>
				</view>
			</view>
		</scroll-view>
		<!-- 缩略图-end -->
		<!-- 指示点 -->
		<view class="banner-num">
			<text>{{ currentIndex+1 }}</text>
			<text>/{{ imageList.length }}</text>
		</view>
		<!-- 指示点-end -->
	</view>
</template>
<script>
	export default {
		props:{
			circular: {
				type: Boolean,
				default: false
			},
			imageList: Array
		},
		data() {
			return {
				currentIndex: 0,
				currentId:'',
			}
		},
		methods:{
			onThumbClick(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.changeView(index);
			},
			swiperChange(e) {
				let index = e.target.current || e.detail.current;
				this.changeView(index);
			},
			changeView(index) {
				this.currentIndex = index;
				let scrollIndex = index - 1 < 0 ? 0 : index - 1;
				this.currentId = 'thumb'+scrollIndex;
			},
			// 浏览商品图片
			onPreviewImages(index) {
				let imageUrls = [];
				this.imageList.forEach(item => {
					imageUrls.push(item.file_path);
				});
				wx.previewImage({
					current: imageUrls[index],
					urls: imageUrls
				});
			},
		}
	}
</script>
<style lang="scss">
	/*隐藏滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	.swiper{
		position: relative;
	  padding-bottom: 50rpx;
	}
	// 大图
	.banner-box {
	  height: 400rpx;
	}
	.slide-image,.imgBox{
	  height: 100%;
	  width: 100%;
	}
	.slide-image {
	  background: #fff;
	}
	// 缩略图
	.thumb-banner-box{
		position: absolute;
		bottom: 0;
		right: 94rpx;
		width: 300rpx;
		height: 100rpx;
		flex-direction: row;
		white-space: nowrap;
		.thumb-banner-item{
			display: inline-block;
			flex-wrap: nowrap;
			padding-left: 10rpx;
			padding-right: 10rpx;
			&::after{
				content: '';
				display: block;
				width: 12rpx;
				height: 4rpx;
				margin: 6rpx auto 0;
				transform: skew(-30deg);
				background: transparent;
			}
			&.active::after{
				background: #CB0133;
				animation: 0.2s rightRouceIn ease-in-out;
			}
		}
		.slide-image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 8rpx;
		}
	}
	@keyframes rightRouceIn{
		0%{transform: translateX(5rpx);}
		50%{transform: translateX(-5rpx);}
		100%{transform: translateX(0);}
	}
	/* banner计数 */
	.banner-num {
	  position: absolute;
	  right: 30rpx;
	  bottom: 20rpx;
	  font-size: 24rpx;
	  line-height: 26rpx;
	}
	
	.banner-num text:last-child {
	  font-size: 24rpx;
	}
</style>
